<template>
  <div class="app-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>质量标准详情</h3>
          <div class="right-menu">
            <el-button type="primary" plain @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="标准编号">{{ standardDetail.code }}</el-descriptions-item>
        <el-descriptions-item label="标准名称">{{ standardDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="标准分类">{{ standardDetail.categoryName }}</el-descriptions-item>
        <el-descriptions-item label="标准版本">{{ standardDetail.version }}</el-descriptions-item>
        <el-descriptions-item label="发布日期">{{ standardDetail.publishDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="standardDetail.status === 1 ? 'success' : 'danger'">
            {{ standardDetail.status === 1 ? '有效' : '无效' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="标准文档" :span="2">
          <a v-if="standardDetail.docUrl" :href="standardDetail.docUrl" target="_blank">
            <el-button link type="primary">查看文档</el-button>
          </a>
          <span v-else>暂无文档</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ standardDetail.remark || '暂无备注' }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="center">标准参数</el-divider>

      <el-table :data="paramList" border stripe style="width: 100%">
        <el-table-column label="参数名称" prop="name" min-width="150" />
        <el-table-column label="参数单位" prop="unit" width="100" align="center" />
        <el-table-column label="标称值" prop="nominalValue" width="120" align="center" />
        <el-table-column label="最小值" prop="minValue" width="120" align="center" />
        <el-table-column label="最大值" prop="maxValue" width="120" align="center" />
        <el-table-column label="数据类型" prop="dataType" width="100" align="center" />
        <el-table-column label="参数说明" prop="remark" min-width="200" />
      </el-table>

    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getStandard } from "@/api/qep/standard";
import { listStandardParam } from "@/api/qep/standardParam";
import { parseTime } from '@/utils/ruoyi';

const route = useRoute();
const router = useRouter();
const standardDetail = ref({});
const paramList = ref([]);
const loading = ref(false);

// 获取标准详情
function getStandardDetail(id) {
  loading.value = true;
  getStandard(id).then(response => {
    standardDetail.value = response.data || {};
    
    // 获取标准参数
    listStandardParam({ standardId: id }).then(paramResponse => {
      paramList.value = paramResponse.rows || [];
      loading.value = false;
    }).catch(() => {
      loading.value = false;
    });
  }).catch(() => {
    loading.value = false;
  });
}

// 返回列表页
function goBack() {
  router.go(-1);
}

onMounted(() => {
  if (route.query.id) {
    getStandardDetail(route.query.id);
  }
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-menu {
  margin-left: auto;
}

.el-divider {
  margin: 30px 0;
}
</style> 